<template>
    <div class="home">
        <ul class="count">
            <li>
                <div>
                    <span>{{count}}</span>
                    <span>篇</span>
                </div>
                <div>总文章数</div>
            </li>
            <li>
                <div>
                    <span>{{dailyAddition}}</span>
                    <span>篇</span>
                </div>
                <div>日新增文章数</div>
            </li>
            <li>
                <div>
                    <span>0</span>
                    <span>条</span>
                </div>
                <div>评论总数</div>
            </li>
            <li>
                <div>
                    <span>0</span>
                    <span>条</span>
                </div>
                <div>日新增评论数</div>
            </li>
        </ul>
        <div class="main">
            <div class="l" />
            <div class="r" />
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { articleCateGroupTotal, articleInfoByPubDate, articleInfoCount } from '@/api'
import { parseTime } from '@/utils'
export default {
    data(){
        return{
            count: 0,
            dailyAddition: 0
        }
    },
    async mounted() {
        this.count = (await articleInfoCount()).data
        let dailyAddition = (await articleInfoByPubDate({
            date: parseTime(new Date(), 'yyyy-MM-dd')
        }))
        this.dailyAddition = dailyAddition.data
        let pubDateList = await articleInfoByPubDate()
        this.echartsInitL(pubDateList.data)
        let cateList = await articleCateGroupTotal()
        this.echartsInitR(cateList.data)
    },
    methods: {
        echartsInitL(data) {
            let echartsInit = echarts.init(document.querySelector('.main .l'))
            let xAxisData = Object.keys(data)
            let seriesData = xAxisData.map(k => data[k])
            echartsInit.setOption({
                grid: {
                    top: '20%',
                    bottom: '10%',
                    left: '10%',
                    right: '10%'
                },
                legend: {
                    data: ['日新增文章数'],
                    top: '10%'
                },
                title: {
                    text: '日新增文章数',
                    textAlign: 'left',
                    left: 'center'
                },
                tooltip: {},
                xAxis: [{
                    boundaryGap: false,
                    name: '日',
                    data: xAxisData,
                }],
                yAxis: [{
                    name: '日新增文章数',
                    axisLine: {
                        show: true
                    },
                    splitLine: {
                        show: false
                    },
                }],
                series: [{
                    name: '日新增文章数',
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: '#F89E2B'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#FFE1BD'
                        }, {
                            offset: 1,
                            color: '#FFFEFB'
                        }])
                    },
                    data: seriesData
                }]
            })
        },
        echartsInitR(data) {
            let echartsInit = echarts.init(document.querySelector('.main .r'))
            let colorList = ['#FF9C61', '#5386ED', '#02BDD8', '#00B466']
            let legendData = data.map(item => item.name)
            let seriesData = data.map((item, i) => ({
                value: item.total,
                name: item.name,
                label: {
                    show: true,
                    formatter: p => {
                        return `名称：${p.name}\n数量：${p.value}`
                    },
                    color: colorList[i]
                },
                itemStyle: {
                    color: colorList[i]
                }
            }))
            echartsInit.setOption({
                grid: {
                    top: '25%',
                    bottom: 0
                },
                title: {
                    text: '分类文章数量比',
                    textAlign: 'left',
                    left: 'center'
                },
                legend: {
                    top: '10%',
                    data: legendData
                },
                series: [{
                    type: 'pie',
                    radius: ['30%', '50%'],
                    data: seriesData
                }]
            })
        }
    }
}
</script>

<style scoped lang="scss">
.home {
    .count {
        display: flex;
        justify-content: space-between;
        li {
            width: calc(25% - 20px);
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
            text-align: center;
            div:nth-child(1) {
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                span:nth-child(1) {
                    font-size: 40px;
                }
                span:nth-child(2) {
                    font-size: 12px;
                    position: relative;
                    top: 10px;
                    left: 10px;
                }
            }
            div:nth-child(2) {
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                background-color: rgb(221, 221, 221);
            }
        }
    }
    .main {
        display: flex;
        height: 400px;
        margin-top: 20px;
        .l {
            flex: 2;
            margin-right: 20px;
            background-color: #fff;
            padding-top: 20px;
            height: 100%;
        }
        .r {
            flex: 1;
            margin-left: 20px;
            background-color: #fff;
            padding-top: 20px;
            height: 100%;
        }
    }
}
</style>

